<template>
  <section id="DeviceType">
    <iLayout left>
      <section slot="title">设备类型</section>
      <section slot="left">
        <section class="list">
          <section class="list-item" v-for="item in data" :key="item.id" @click="showDetail(item)">
            <span class="list-item-name">{{ item.name }}</span>
            <span class="list-item-action">
              <el-button type="warning" icon="el-icon-edit" size="mini" circle title="修改" @click.stop="editType(item)"></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" circle title="删除" @click.stop="delType(item)"></el-button>
            </span>
          </section>
          <section class="list-item text-center" @click="addType"><i class="el-icon-plus"></i></section>
        </section>
      </section>
      <section slot="right">
        <section class="form">
          <section class="form-title">{{ form_title }}</section>
          <section class="form-body">
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" size="max" :readonly="isReadonly" placeholder="请输入设备类型名称"></el-input>
              </el-form-item>
              <el-form-item label="标识" prop="flag">
                <el-input type="number" v-model="form.flag" size="max" :readonly="isReadonly" placeholder="请输入设备类型名称"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="form.remark" size="max" :readonly="isReadonly" placeholder="请输入设备类型备注"></el-input>
              </el-form-item>
            </el-form>
          </section>
          <section class="form-action" v-if="isAdd || isEdit">
            <el-button type="default" icon="el-icon-close" round title="取消" @click="cancel"></el-button>
            <el-button type="primary" icon="el-icon-check" round title="确认" @click="confirm"></el-button>
          </section>
        </section>
      </section>
    </iLayout>

    <el-dialog title="删除类型" :visible.sync="isDel" width="30%">
      该操作将删除类型：<el-tag type="danger">{{ form.name }}</el-tag
      >，您确定要删除吗？
      <section slot="footer">
        <el-button type="default" icon="el-icon-close" round title="取消" @click="cancel"></el-button>
        <el-button type="primary" icon="el-icon-check" round title="确认" @click="confirm"></el-button>
      </section>
    </el-dialog>
  </section>
</template>

<script>
import * as api from '../../api/private/device_type'
export default {
  name: 'DeviceType',
  data: () => ({
    data: [],
    form: {},
    rules: {
      name: [{ required: true, message: '请输入设备类型名称' }],
      flag: [{ required: true, message: '请输入设备类型标识' }]
    },
    form_title: '设备类型详情',
    isReadonly: true,
    isAdd: false,
    isEdit: false,
    isDel: false
  }),
  methods: {
    async getDeviceType() {
      const data = await api.getDeviceType()
      if (data.code === 0) {
        this.data = data.data
      }
    },
    showDetail(data) {
      this.form_title = '设备类型详情'
      this.form = data
    },
    cancel() {
      this.form_title = '设备类型详情'
      this.isReadonly = true
      this.isAdd = false
      this.isEdit = false
      this.isDel = false
      this.$refs.form.resetFields()
    },
    confirm() {
      if (this.isAdd) {
        this.confirmAddType()
      }
      if (this.isEdit) {
        this.confirmEditType()
      }
      if (this.isDel) {
        this.confirmDelType()
      }
    },
    addType() {
      this.form = {}
      this.form_title = '添加设备类型'
      this.isReadonly = false
      this.isAdd = true
      this.isEdit = false
      this.isDel = false
    },
    confirmAddType() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const data = await api.addDeviceType(this.form)
          if (data.code === 0) {
            this.$msg.success(`设备类型添加成功`)
          } else {
            this.$msg.error(`设备类型添加失败，${data.msg}`)
          }
          this.cancel()
          this.getDeviceType()
        }
      })
    },
    editType(data) {
      this.form = JSON.parse(JSON.stringify(data))
      this.form_title = '修改设备类型'
      this.isReadonly = false
      this.isAdd = false
      this.isEdit = true
      this.isDel = false
    },
    confirmEditType() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const data = await api.editDeviceType(this.form)
          if (data.code === 0) {
            this.$msg.success(`设备类型修改成功`)
          } else {
            this.$msg.error(`设备类型修改失败，${data.msg}`)
          }
          this.cancel()
          this.getDeviceType()
        }
      })
    },
    delType(data) {
      this.form = data
      this.isAdd = false
      this.isEdit = false
      this.isDel = true
    },
    async confirmDelType() {
      const data = await api.delDeviceType([this.form.id])
      if (data.code === 0) {
        this.$msg.success(`设备类型删除成功`)
      } else {
        this.$msg.error(`设备类型删除失败，${data.msg}`)
      }
      this.cancel()
      this.getDeviceType()
    }
  },
  created() {
    this.getDeviceType()
  }
}
</script>

<style lang="scss" scoped>
#DeviceType {
  width: 100%;
  height: 100%;

  .list {
    width: 100%;
    box-sizing: border-box;

    .list-item {
      transition: all 0.1s ease-in-out;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 0.5rem;
      margin-bottom: 0.5rem;
      border-radius: 0.25rem;
      font-size: 1.05rem;
      cursor: pointer;
      font-weight: bold;

      &:hover {
        box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.3), 0 -0.05rem 0.1rem rgba(0, 0, 0, 0.15);

        & > .list-item-name {
          margin-right: 1rem;
        }

        & > .list-item-action {
          display: inline;
        }
      }

      .list-item-name {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .list-item-action {
        display: none;
      }
    }

    .text-center {
      justify-content: center;
    }
  }

  .form {
    width: 30rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    margin: 3rem auto;
    box-sizing: border-box;

    .form-title {
      width: 100%;
      font-size: 1.5rem;
      margin: 2rem 0;
    }

    .form-body {
    }

    .form-action {
      margin-top: 3rem;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
